<template>
	<!-- 已經上市 -->
	<view class="listed">
		<view class="listed__header">
			<view class="header__item">{{$t('stock.name')}}</view>
			<view class="header__item">{{$t('ipo.firstDay')}}</view>
			<view class="header__item">{{$t('ipo.dark')}}</view>
		</view>
		<view class="listed__item" v-for="(item, index) in ipoMarkList" :key="index" >
			<view class="item__name">
				<view class="name__text">{{item.name}}</view>
				<view class="name__info">
					<text class="info__tag">{{item.zimudaima?item.zimudaima.split(":")[0]:"-"}}</text>
					<text class="info__code">{{item.shuzidaima}}</text>
				</view>
			</view>
			<view class="item__price">
				<view class="price__num">{{item.yijiacha || 0}}</view>
			</view>
			<view class="item__increa">
				<text class="increa__num">{{item.baifenbi || 0}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {}
		},
		props:{
			ipoMarkList:{
				type:Array,
				default:()=>([])
			}
		},
		methods:{
			itemClick(item){
				let {id} = item
				uni.navigateTo({
					url:`/pages/account/stockDetail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.listed{
		.listed__header{
			@include flexRowAlign(space-between);
			height: 64rpx;
			margin-top: 20rpx;
			.header__item{
				@include flexRowAlign(center);
				font-size: 24rpx;
				color: #999999;
				width: 220rpx;
				&:nth-child(2){
					flex: 1;
				}
				&:first-child{
					justify-content: flex-start;
				}
				&:last-child{
					flex: 1;
					justify-content: flex-end;
				}
			}
		}
		.listed__item{
			@include flexRowAlign(space-between);
			height: 120rpx;
			// border-top: 1rpx solid #EEEEEE;
			.item__name{
				@include flexCenter(column);
				align-items: flex-start;
				width: 240rpx;
				.name__text{
					font-size: 20rpx;
					color: #fff;
				}
				.name__info{
					@include flexRowAlign()
					margin-top: 10rpx;
					.info__tag{
						color: #fff;
						font-size: 24rpx;
						padding: 2rpx 8rpx;
						height: 28rpx;
						background: #0369F6;
						border-radius: 6rpx;
						@include flexCenter();
					}
					.info__code{
						font-size: 20rpx;
						font-weight: 500;
						color: #FFFFFF;
						margin-left: 10rpx;
					}
				}
			}
			.item__price{
				@include flexCenter(column);
				flex: 1;
				.price__num{
					width: 150rpx;
					height: 56rpx;
					background: rgba(#2DC065, 0.2);
					border-radius: 8rpx;
					font-size: 28rpx;
					font-weight: 800;
					color: #2DC065;
					@include flexCenter(column);
				}
			}
			.item__increa{
				@include flexRowAlign(flex-end);
				flex: 1;
				.increa__num{
					min-width: 150rpx;
					height: 48rpx;
					background: rgba(#FF3B46, 0.5);
					border-radius: 8rpx;
					@include flexCenter(column);
					font-size: 28rpx;
					font-weight: 800;
					color: #FF3B46;
				}
			}
		}
	}
</style>